/*
 * @Author: 
 * @Date: 2022-02-07 16:32:56
 * @LastEditors: lqj
 * @LastEditTime: 2022-02-11 14:05:57
 * @Description: react-router-dom: widthRouter
 */
import React, { Component } from 'react';
import { withRouter } from 'react-router-dom'
import { Button } from 'antd'

class Header extends Component {
  handleGoForward = () => {
    this.props.history.goForward()
  }
  handleGoBack = () => {
    this.props.history.goBack()
  }
  handleGoLink = () => {
    this.props.history.go(-1)
  }
  render() {
    // console.log(this.props)
    return (
      <div style={{margin: '5px'}}>
        <div className="page-header"><h1>React Demo</h1></div>
        <div style={{padding: '0 10px'}}>
          <Button onClick={this.handleGoForward}>GoForward</Button>&nbsp;
          <Button onClick={this.handleGoBack}>GoBack</Button>&nbsp;
          <Button onClick={this.handleGoLink}>GoLink</Button>
        </div>
        <hr />
      </div>
    );
  }
}

// 只有路由组件才能使用存在于props里面的路由方法和数据
// widthRouter可以使得非路由组件使用路由组件api，返回值是一个新的组件
export default withRouter(Header);
